<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-button type="primary" @click="addBtn">新增</el-button>
      </el-col>
      <el-col :span="8">
        <el-input
          v-model="input"
          prefix-icon="el-icon-search"
          placeholder="请输入内容"
          @change="changeFn"
          class="ipt"
        ></el-input>
      </el-col>
    </el-row>
    <el-table
      @sort-change="sortFn"
      :data="tableData"
      max-height="400"
      border
      style="width: 100%;margin-top: 20px;margin-bottom: 20px"
    >
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="title" label="题目"></el-table-column>
      <el-table-column prop="classify" label="类型"></el-table-column>
      <el-table-column prop="uid" label="发布人"></el-table-column>
      <el-table-column
        sortable
        prop="created"
        label="发布日期"
      ></el-table-column>
      <el-table-column prop="answers" label="答案"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="seeFn(scope.row)"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="updataBtn(scope.row)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="deleteBtn(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @current-change="CurrentChangeFn"
      :page-size="5"
      :total="total"
    ></el-pagination>
    <!-- 抽屉 -->
    <el-drawer
      :visible.sync="drawer"
      :with-header="false"
      size="52%;overflow:auto"
    >
      <el-form
        style="margin-top:25px"
        ref="form"
        :model="form"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="题目" prop="title">
          <el-input
            type="textarea"
            v-model="form.title"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="类别" prop="cid">
          <el-select v-model="form.cid" placeholder="请选择类别">
            <el-option
              v-for="(item, index) in selectArr"
              :key="index"
              :label="item.name"
              :value="item.id"
              :disabled="flag"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项">
          <el-row
            style="margin-top:10px;"
            v-for="(item, index) in option"
            :key="index"
          >
            <el-col :span="2">
              <el-checkbox
                v-model="item.checked"
                :disabled="flag"
              ></el-checkbox>
              {{ item.index }}
            </el-col>
            <el-col :span="17">
              <el-input
                type="textarea"
                v-model="item.value"
                :disabled="flag"
              ></el-input>
            </el-col>
            <el-col :span="5">
              <el-button
                v-if="index == option.length - 1"
                type="success"
                icon="el-icon-plus"
                circle
                @click="addOption(index)"
                :disabled="flag"
              ></el-button>
              <el-button
                v-if="index >= 4"
                type="warning"
                icon="el-icon-minus"
                circle
                :disabled="flag"
                @click="removeOption(index)"
              ></el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="答案">{{ answers }}</el-form-item>
        <el-form-item label="提示" prop="tips">
          <el-input
            type="textarea"
            v-model="form.tips"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-show="!flag" type="primary" @click="saveFn('form')">{{
            isUpdata ? "修改" : "新增"
          }}</el-button>
          <el-button
            @click="
              drawer = false;
              flag = true;
            "
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      drawer: false,
      currentPage: 1,
      pageSize: 10,
      input: "",
      form: {},
      checked: [],
      answers: [],
      isUpdata: false,
      flag: false,
      option: [
        { index: "A", value: "", checked: false },
        { index: "B", value: "", checked: false },
        { index: "C", value: "", checked: false },
        { index: "D", value: "", checked: false }
      ],
      rules: {
        title: [{ required: true, message: "请输入题目", trigger: "blur" }],
        option: [{ required: true, message: "请输入答案", trigger: "blur" }],
        tips: [{ required: true, message: "请输入提示", trigger: "blur" }],
        cid: [{ required: true, message: "请选择类型", trigger: "change" }]
      }
    };
  },
  async mounted() {
    await this.getList();
    await this.$store.dispatch("classify/getlist");
  },
  methods: {
    ...mapActions("manage", [
      "getList",
      "paginition",
      "getKeyword",
      "getQuestionsDelete",
      "getCommit",
      "getSort"
    ]),
    //确定按钮
    saveFn(form) {
      //   console.log(this.$refs[form]);
      this.$refs[form].validate(async valid => {
        // console.log(valid);
        if (valid) {
          await this.getCommit({
            ...this.form,
            uid: 1,
            options: JSON.stringify(this.option),
            answers: JSON.stringify(this.answers)
          });
          this.$message({
            type: "success",
            message: "新增成功!"
          });
          this.getList();
          this.drawer = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //新增按钮
    addBtn() {
      this.flag = false;
      this.isUpdata = false;
      this.drawer = true;
      this.form = {};
      this.option.map(item => {
        (item.value = ""), (item.checked = false);
      });
      this.answers = [];
    },
    //搜索
    changeFn() {
      this.getKeyword(this.input);
    },
    //增加选项
    addOption(index) {
      //   console.log(index);
      this.option.push({
        index: String.fromCharCode(),
        value: "",
        checked: false
      });
      //   console.log(this.option);
    },
    //删除选项
    removeOption(index) {
      this.option.splice(index, 1);
    },
    //查看按钮
    seeFn(row) {
      console.log(row);
      this.drawer = true;
      this.form = {
        ...row
      };
      this.option = JSON.parse(row.options);
      this.answer = JSON.parse(row.answers);
      this.flag = true;
    },
    //修改按钮
    updataBtn(row) {
      this.isUpdata = true;
      this.drawer = true;
      this.flag = false;
      this.form = {
        ...row
      };
      this.option = JSON.parse(row.options);
      this.answer = JSON.parse(row.answers);
    },
    //删除按钮
    deleteBtn(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async () => {
          this.getQuestionsDelete(row.id);
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //当前页
    CurrentChangeFn(row) {
      this.paginition(row - 1);
    },
    //排序
    sortFn(row) {
      this.getSort(row);
    }
  },
  computed: {
    total() {
      return this.$store.state.manage.total;
    },
    tableData() {
      return this.$store.state.manage.list;
    },
    selectArr() {
      return this.$store.state.classify.classify;
    }
  },
  watch: {
    //深度监听
    option: {
      deep: true,
      handler: function(newQuestion, oldQuestion) {
        this.answers = [];
        newQuestion.map((value, index) => {
          console.log(value, index);
          this.option[index].index = String.fromCharCode(index + 65);
          value.checked && this.answers.push(value.index);
        });
      }
    }
  }
};
</script>

<style scoped>
.drawer {
  overflow: auto;
}
</style>
